(
    function () {
        axios.get('/api/supportsupload', {}).then(function (res) {
            console.log(res);

            let html = ``;
            res.data.data.forEach(element => {
                // 匹配内容里面的图片，渲染3张在主图上。
                let imgreg = /src=[\'\"]?([^\'\"]*)[\'\"]?/gi;
                // let imgArr = imgreg.exec(decodeURI(element.content));
                let imgArr = element.content.match(imgreg);
                for (let i = 0; i < 3; i++) {
                    // console.log(imgArr[i]);
                }
                // 匹配内容里面的文字，渲染
                let textReg1 = /<img.*?(?:>|\/>)/gi;
                let textStr = element.content.replace(textReg1, '');
                let texts = textStr.replace(/(\<img\/>|\<p>|\<\/p>|\<h>|\<\/h>|\<br>)/gi, function ($0, $1) {
                    return {
                        "<img/>": '',
                        "<p>": '',
                        "<h>": '',
                        "</p>": '',
                        "</h>": '',
                        "<br>": '',
                    }[$1];
                })
                //    console.log(element.aid);

                html += `
                <div class="avatar">
                <div class="avatimg"> 
                    <img src=${element.avater} alt="">
                    <div class="avatmol">
                        <div class="bbox">
                            <div class="bigavat">
                                <img src=${element.avater} alt="">
                            </div>
                            <a href="" style="margin-top: 25px;font-size: 20px;font-weight: 500;">
                                <div class="nichen">${element.username}</div>
                                <div style="font-size: 12px;">${element.introduce}</div>
                            </a>
                            <div class="molrig">
                                <div class="support">
                                    <span class="suppor" style="font-size: 22px">${element.supports}</span>
                                    <span >收到赞</span>
                                </div>
                                <div class="fan">
                                    <span style="font-size: 22px">${element.fans}</span>
                                    <span>粉丝</span>
                                </div>
                            </div>
                        </div>
                        <div class="icon">
                            <div class="sign" style="font-size: 13px;">
                                <span class="iconfont">&#xe670;</span>
                                <span>x2</span>
                                <span class="iconfont">&#xe688;</span>
                                <span>x2</span>
    
                            </div>
                            <div class="concern">关注Ta</div>
                        </div>
                    </div>
                </div>
                <a href="./articletails.html?aid=${element.aid}">
                <div class="art_info" style="width: 590px; ">
                    <h2 class="artit" style="display: inline;font-size:18px;color:#000;">${element.title}</h2>
                    <div class="author" style="font-size: 13px;color:#c1c1c1">
                        by
                            <div class="netname" style = "color:#c1c1c1;">${element.username}</div>
                    </div>
                        <div>
                        <div class="longtext"
                            style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 13px;margin: 4px 0 6px 0;color:#494646cc">
                            ${texts}
        
                        </div>
                        <div class="artimg" style="margin: 6px 0;">
                            <img ${imgArr[0]} alt=""
                                style="display: inline-block;width: 193px;height: 110px;">
                            <img ${imgArr[1]} alt=""
                                style="display: inline-block;width: 193px;height: 110px;">
                            <img ${imgArr[2]} alt=""
                                style="display: inline-block;width: 193px;height: 110px;">
                        </div>
                        </div>
    
                    <div class="artaction" style="color:#8e8e8e;; font-size: 13px;">
                        <span class="iconfont">&#xec8c; </span>
                        <span style="margin: 0 10px;" class="suppor">${element.supports}</span>
                            <div>
                            <span class="iconfont">&#xe7dd;</span>
                            <span>${element.share}</span>
                            </div>
                        <span class="times" style="margin-left:443px">${element.addtimes.split('T')[0]}</span>
                    </div>
                </div>
                </a>
            </div>
            `
                    ;
            });

            let artlist = document.querySelector('.artlist');


            artlist.innerHTML = html;

        }).catch(function (error) {
            console.log(error);
        });
    }


)();


